<template>
  <a-modal :visible="visible" title="选择类型" destroyOnClose centered @ok="submitForm" @cancel="cancel"
    :confirmLoading="submitLoading" okText="确认" :closable="false" :keyboard="false" :maskClosable="false" :footer="false">
    <div class="countBox" v-for="user in userList" :key="user.userCode">
          <div>
            <div class="fistrChild">
              <p class="gardens"></p>
              <p>
                <a-badge>
                  <span class="fullDeptName">{{user.name}}</span>
                </a-badge>
              </p>
            </div>
            <div>
                <a-button type="primary" class="goTypebtn" @click="userLogin(user)" :ghost="true">点击选择</a-button>
            </div>
          </div>
        </div>
  </a-modal>
</template>

<script>
import { selectRoleByUserId } from '@/api/sso'

import storage from '@/utils/storage'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    submitLoading: {
      type: Boolean,
      default: false
    },

  },
  mounted() {
    this.getList()
  },
  data() {
    return {
      userList: []
    }
  },
  methods: {
    userLogin(user){
      // let userInfo = storage.session.get('userInfo')
      // userInfo.userName = user.name
      // storage.session.set('userInfo', userInfo)
      // storage.session.set('role', user.id)
      // this.$store.commit('setRole', user.id)

      // let roles = this.userList.map(item => {
      //   return item.id
      // })
      // storage.session.set('roles', roles)
      // storage.session.set('isLogin', true)
      // this.$router.push('/portal')
      this.$emit('ok',user,this.userList)
    },
    getList() {
      selectRoleByUserId().then(res => {
        if (res.code == 0) {
          this.userList = res.data
        }
      })
    },
    cancel() {
      this.$emit('cancel')
    },
    submitForm() {
      if (this.noBalance) this.$emit('ok')
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-bottom: 10px;
}
.countBox{
    width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
}
.countBox>div{
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.countBox .fistrChild{
    display: flex;
    width: 356px;
    line-height: 32px;
}
.countBox .fistrChild .fullDeptName{
  padding-right: 15px;
  display: inline-block;
  width: 322px;
  margin-top: -6px;
}
.countBox .gardens{
    width: 16px;
    height: 16px;
    background: red;
    border-radius: 50%;
    margin: 8px 10px 0 0;
}
.countBox .goTypebtn{
    float: right;
}
</style>